<template>
    <div class="register">
        <!-- 顶部导航 -->
        <van-row>
            <van-col span="24" class="nav-bar">
                <img :src="leftArrow" alt="left_arrow" width="100%" @click="goBack">
            </van-col>
        </van-row>
        <!-- 标题 -->
        <van-row>
            <van-col span="24" class="title">
                <h1>注册</h1>
            </van-col>
        </van-row>
        <!-- 表单 -->
        <van-row class="panel">
            <van-field
                v-model="username"
                label="用户名"
                placeholder="请输入用户名"
                required
                left-icon="iconfont icon-user"
                clearable
                @click-right-icon="username=''"
                :error-message="usernameErrorMsg"
                ></van-field>
            <van-field
                v-model="password"
                type="password"
                label="密码"
                placeholder="请输入密码"
                required
                left-icon="iconfont icon-lock"
                clearable
                @click-right-icon="password=''"
                :error-message="passwordErrorMsg"
                ></van-field>
            <div class="btn">
                <van-button 
                    class="btn" 
                    type="default"
                    size="large"
                    round
                    @click="registerAction"
                    :loading="isLoading"
                    loading-text="注册中..."
                    >立即注册</van-button>
            </div>
        </van-row>
    </div>
</template>

<script>
import URL from '@/ServiceAPI.config.js';
import { Toast } from 'vant';
import userStorage from '@/utils/userStorage';
    export default {
        data() {
            return {
                leftArrow: require("../../assets/images/left_arrow.png"),
                username: '',
                password: '',
                isLoading: false, // 是否正在注册中（防止用户重复提交）
                usernameErrorMsg: '', // username填写错误时的提示
                passwordErrorMsg: '', // password填写错误时的提示
            }
        },
        methods: {
            goBack() {
                this.$router.go(-1);
            },
            registerAction() {
                this.checkForm() && this.axiosRegisterUser();
            },
            // 发起注册请求
            axiosRegisterUser() {
                this.isLoading = true;
                this.$ajax({
                    url: URL.registerUser,
                    method: 'POST',
                    data: {
                        username: this.username,
                        email: '',
                        password: this.password,
                        avatar: 'http://placekitten.com/300/200'
                    }
                }).then(res => {
                    console.log(res);
                    this.isLoading = false;
                    if (res.data.code === 200) {
                        userStorage.setUserInfo(res.data.data.userInfo);
                        Toast.success(res.data.message);
                        this.$router.push('/');
                    } else if (res.data.code === 1) {
                        Toast.fail(res.data.message);
                        this.username = this.password = "";
                    } else {
                        console.log(res.data.message);
                        Toast.fail('注册失败，请重试');
                    }
                }).catch(err => {
                    console.log(err);
                    this.isLoading = false;
                    Toast.fail('注册失败，请重试');
                });
            },
            // 表单验证
            checkForm() {
                let isOk = true;
                if (this.username.length < 5) {
                    this.usernameErrorMsg = "用户名不能小于5位";
                    isOk = false;
                } else {
                    // 这个else是为了当第一次username为空时报错，
                    // 但第二次用户填对了的时候，把错误消息重置为空
                    this.usernameErrorMsg = "";
                }
                if (this.password.length < 6) {
                    this.passwordErrorMsg = "密码不能小于6位";
                    isOk = false;
                } else {
                    this.passwordErrorMsg = "";
                }
                return isOk;
            }
        }
    }
</script>

<style scoped lang="scss">
.register {
    box-sizing: border-box;
    padding: 0 1.5rem;
    height: 100vh;
    background-color: #ff3a4ed6;
    // 导航栏
    .nav-bar {
        height: 2.4em;
        line-height: 2.4rem;
        img {
            width: 1.5rem;
            vertical-align: middle;
        }
    }
    // 标题
    .title {
        color: white;
        h1 {
            font-weight: lighter;
        }
    }
    .panel {
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        overflow: hidden;
        border-radius: 10px;

        .van-field {
            background-color: #efefef;
            margin: 10px 0;
        }

        .van-field:first-of-type {
            margin: 5px 0 10px 0;
        }

        .btn {
            text-align: center;
            color: #fff;
            button {
                font-weight: lighter;
                height: 40px;
                line-height: 36px;
                background: -webkit-gradient(linear, left top, left bottom, from(#ff3a4ed6), to(#fc6663));
                background: gradient(linear, left top, left bottom, from(#ff3a4ed6), to(#fc6663));
                background: -prefix-linear-gradient(top, #ff3a4ed6, #fc6663);
                background: linear-gradient(top, #ff3a4ed6, #fc6663);
                box-shadow: 2px 4px 8px 0px rgba(46, 61, 73, 0.2);
            }
        }
    }
}
</style>